<!--
 * @Author: chenxunan
 * @Date: 2019-11-19 
 * @LastEditors: 
 * @LastEditTime: 
 * @Description: 
 -->

<template>
  <div class="grimm-image-picker">
    <template v-if="!oneStatus">
      <div 
        v-for="(item, index) in images" 
        :key="index" 
        class="grimm-image-picker-item"
        :style="{'flex': `0 0 calc(${100 / length}% - 8px)`}"
      >
        <div 
          v-if="showDelete" 
          class="iconfont error-full"
          @click.stop="deleteFile(index)"
        ></div>
        <div 
          :style="{'background-image':`url(${item.url})`}" 
          class="grimm-image-picker-item-content"
        ></div>
      </div>
    </template>
    <div 
      class="grimm-image-picker-item"
      :style="{'flex': `0 0 calc(${100 / length}% - 8px)`}"
      v-if="selectable"
    >
      <div 
        v-if="inputDisplay"
        :style="{'background-image':`url(${images[0].url})`}" 
        class="grimm-image-picker-item-content"
      >
      </div>
      <div class="grimm-image-picker-item-upload" v-else>
        <span class="iconfont photo"></span>
      </div>
      <input type="file" :accept="accept" :multiple="multiple" @change="addFile" ref="inputUpload">
    </div>
  </div>
</template>

<script>
const COMPONENT_NAME = 'grimm-image-picker';
export default {
  name: COMPONENT_NAME,
  props: {
    files: {
      type: Array,
      default: [],
    },
    maxSize: {
      type: Number,
      default: null,
    },
    // 是否显示添加按钮
    selectable: {
      type: Boolean,
      default: true,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 文件类型
    accept: {
      type: String,
      default: 'image/*',
    },
    // 是否显示删除按钮
    showDelete: {
      type: Boolean,
      default: true,
    },
    // 一行展示多少个
    length: {
      type: [Number, String],
      default: 1,
    },
    // 限制数量
    maxLength: {
      type: [Number, String],
      default: null,
    },
    // 只上传一张
    oneStatus: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      images: this.files
    }
  },
  computed: {
    inputDisplay() {
      return this.oneStatus && this.images.length
    }
  },
  methods: {
    addFile(event) {
      const file = [...event.target.files];
      let url = null;
      // console.log(file);
      if (this.maxLength && (file.length + this.images.length) > this.maxLength) {
        this.$createToast({
          time: 3000,
          type: 'error',
          txt: `只能上传${this.maxLength}张图片`,
        }).show();
        return
      }
      for (let k in file) {
        if (this.maxSize && file[k].size > this.maxSize * 1024) {
          this.$createToast({
            time: 3000,
            type: 'error',
            txt: `文件大小不能超过${this.maxSize}kB`,
          }).show();
          return
        }
        if (window.createObjectURL !== undefined) { // basic
          url = window.createObjectURL(file[k]);
        } else if (window.URL !== undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file[k]);
        } else if (window.webkitURL !== undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file[k]);
        }
        // console.log('111')
        if (!this.oneStatus) {
          this.images.push({url});
        } else {
          this.images.splice(0, 1, {url})
        }
      }
      this.$emit('onChange', {files: this.images, type: 'add'});
    },
    deleteFile(index) {
      // console.log(index);
      this.images.splice(index, 1);
      this.$emit('onChange', {files: this.images, type: 'remove', index});
    },
  },
}
</script>


<style lang="stylus">

</style>